<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .title {
            line-height: 40px;
            font-weight: bold;
            text-align: center;
        }

        .list .item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 20px;
        }

        .list .item img {
            width: 60px;
        }

        .empty {
            text-align: center;
            margin: 50px;
        }
    </style>
</head>
<!-- ! v-show 控制元素显示/隐藏，v-show所在的元素一定会渲染，但是元素的显示隐藏是通过style样式中的display属性来控制的 -->
<!-- ! v-if 控制元素的显示/隐藏,v-if条件成立时渲染，如果条件不成立则不渲染，元素的显示/隐藏是通过是否渲染该元素来控制的 -->
<!-- ! 如果一个元素的显示/隐藏 比较频繁 建议使用v-show 内存开销小 -->
<!-- ! v-if不能和v-for一起在同一个标签上使用，有优先级问题（v-if的优先级高于v-for） -->

<body>
    <div id="app">
        <div class="title">任务列表</div>
        <div class="list">

            <div class="item" v-for="(item,index) in tasklist" v-bind:key="index">
                <div class="left">
                    <img v-bind:src="item.pic" alt="">
                </div>
                <div class="middle">
                    <div class="name"> {{ item.name }} </div>
                    <div class="desc"> {{ item.desc }} </div>
                </div>
                <div class="right">
                    <!-- ? 方法一 -->
                    <!-- <button v-on:click="changStatus(item)"> {{ item.status == 1 ? '去完成' : (item.status == 2 ? '领取' :
                        '已领取') }} </button> -->

                    <!-- ? 方法二 -->
                    <!-- ?  v-if v-else-if  v-else-->
                    <button v-if="item.status==1" v-on:click="changStatus(item)"> 去完成 </button>
                    <button v-else-if="item.status==2" v-on:click="changStatus(item)"> 领取 </button>
                    <button v-else v-on:click="changStatus(item)"> 已领取 </button>
                </div>
            </div>
            <!-- <div class="empty" v-show="tasklist.length==0">
                任务列表为空
            </div> -->
            <div class="empty" v-if="tasklist.length==0">
                任务列表为空
            </div>
        </div>
    </div>
</body>

</html>
<script src="./vue-2.5.21.js"></script>
<script>
    // 实例化vue对象
    var v = new Vue({
        //这个位置放置vuejs规定的一些选项（这些选项的名字是固定的，另外这些选项是可选的）
        el: '#app',//el变色vue实例挂载的dom节点

        // data:function(){return {}}//使用函数的写法可以在实例化对象时生成一个新的数据
        data: {
            tasklist: [
                { id: 1, pic: './pic.png', name: '咪咕视频送流量', desc: '每月领500MB流量', status: 1 },
                { id: 2, pic: './pic.png', name: '咪咕视频送福利', desc: '每月领800MB流量', status: 2 },
                { id: 3, pic: './pic.png', name: '咪咕视频送套餐折扣券', desc: '每月领1500MB流量', status: 3 },
                { id: 4, pic: './pic.png', name: '咪咕视频送超级秒杀', desc: '每月领5500MB流量', status: 1 },
            ]

        },//data定义响应式数据，data的类型可以是对象也可以是函数

        computed: {},//computed定义计算属性

        watch: {},//watch定义数据监听

        methods: {
            changStatus(item) {
                if (item.status == 1) {
                    item.status = 2
                } else if (item.status == 2) {
                    item.status = 3
                }
            }
        },//methods定义方法（函数）

        filters: {},//filters定义过滤器

        directives: {},//directives定义自定义指令

        components: {},//components注册局部组件
    })
</script>